<%--
  User: Eugenema
  Date: 2022/3/27 14:01
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ page import="com.eugeneMa.common.Config" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<% Object enumMap = JSONObject.toJSON(Config.enumMap); %>
<% String systemVersion = Config.properties.get("systemVersion"); %>
<html>
<head>
    <title>学习铃</title>
    <!-- 网页小图标 -->
    <link rel="shortcut icon" href="/resources/images/brand/emPersonLogo_black.png">
    <!-- 引入Element-UI样式文件 -->
    <link rel="stylesheet" href="/resources/element-ui/index.css">
    <!-- 引入VUE核心JS文件 -->
    <script src="/resources/js/vue.js"></script>
    <!-- 引入Element-UI核心JS文件 -->
    <script src="/resources/element-ui/index.js"></script>
    <script src="/resources/js/jquery.js"></script>
    <!-- 引入公共js -->
    <script src="/resources/js/public.js"></script>
    <!-- 引入公共css -->
    <link rel="stylesheet" href="/resources/css/public.css">
</head>
<style>
    body{
        background: linear-gradient(-45deg, #c4d2ef, #dfe6f6);
    }

    /** 主区域不设内边距 */
    .el-main {
        padding: 0px !important;
    }

    /** 分割线边距 */
    .el-divider--horizontal {
        margin: 10px 0 10px 0 !important;
    }
</style>
<body>
    <div id="learnBell-Element">
        <transition name="el-zoom-in-center">
            <el-container class="fullWH" v-show="screenShow">
                <!-- 课时表 -->
                <el-aside width="25%" style="min-width: 300px; height: 98vh; margin-left: 20px">
                <el-card style="width: 99%; height: 99%">
                    <!-- 课时表标题栏 -->
                    <div slot="header" style="height: 4%; min-height: 10px">
                        <!-- 选择课时表 -->
                        <el-dropdown @command="classTimeSelect" class="availableMouse">
                            <span style="font-weight: bold; font-size: 17px">
                                {{classTimeNowObject.designation}}<i class="el-icon-arrow-down"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(classTime, index) in classTimeList" v-text="classTime.designation" :command="index"></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <!-- 操作课时表 -->
                        <el-dropdown @command="classTimeOperation"
                                     class="availableMouse"
                                     style="float: right">
                            <span style="color: #409EFF">
                                操作课时表
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="1">
                                    <i class="el-icon-document-add"></i>
                                    新增课时表
                                </el-dropdown-item>
                                <el-dropdown-item :command="3" :disabled="classTimeEditDisabled">
                                    <i class="el-icon-edit"></i>编辑课时表
                                </el-dropdown-item>
                                <el-dropdown-item :command="4" :disabled="classTimeEditDisabled">
                                    <i class="el-icon-delete"></i>删除课时表
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!-- 课时表计划展示区域 -->
                    <div v-loading="classTimeListLoading" style="width: 100%; height: 85%;">
                        <el-scrollbar>
                            <!-- 空状态 -->
                            <el-empty id="classTimeEmpty" description="空空如也"></el-empty>

                            <!-- 数据区域 -->
                            <div id="classTimeSteps" style="display: none">
                                <!-- 课时表状态 -->
                                <div style="width: 100%; height: 7%;">
                                    <el-row>
                                        <el-col :span="2">
                                            <img src="/resources/images/static/clockAnimationIcon.gif"
                                                    style="width: 20px; height: 20px"/>
                                        </el-col>
                                        <el-col :span="17">
                                            {{classTimeState}}
                                        </el-col>
                                        <el-col :span="5">
                                            <el-switch
                                                    v-model="classTimeSwitch"
                                                    style="float: right"
                                                    @change="classTimeSwitchMethod"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </el-col>
                                    </el-row>
                                </div>

                                <!-- 课时表计划 -->
                                <el-divider><i class="el-icon-tickets"></i></el-divider>
                                <div style="height: 87%;">
                                    <el-steps direction="vertical"
                                              :active="active"
                                              space="8%"
                                              finish-status="success"
                                              style="margin-top: 10px">
                                        <el-step v-for="subPlan in classTimePlan" :title="subPlan.title" :icon="subPlan.type"></el-step>
                                    </el-steps>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-card>
            </el-aside>

                <!-- 主区域 -->
                <el-main style="margin-left: 10px; height: 100%;">
                    <el-container style="height: 97%;">
                        <!-- 标题栏 -->
                        <el-header style="width: 100%;
                                      height: 7% !important;
                                      line-height: 7%;
                                      background-color: #ffffff;
                                      border-radius: 4px">
                            <!-- 登录信息 -->
                            <div style="width: 200px; height: 80%; float: right;">
                                <el-row :gutter="10">
                                    <el-col :span="20">
                                        <div style="line-height: 250%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: right">
                                            ${userName}
                                        </div>
                                    </el-col>
                                    <div class="availableMouse">
                                        <el-col :span="4" style="height: 100%;">
                                            <el-dropdown @command="handleCommand">
                                                <i class="el-icon-caret-bottom" style="line-height: 230%; font-size: 20px"></i>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item command="消息中心">
                                                        <i class="el-icon-message-solid"></i>消息中心
                                                    </el-dropdown-item>
                                                    <el-dropdown-item command="用户信息">
                                                        <i class="el-icon-user-solid"></i>用户信息
                                                    </el-dropdown-item>
                                                    <el-dropdown-item divided command="logout">
                                                        <i class="el-icon-switch-button"></i>退出登录
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </el-col>
                                    </div>
                                </el-row>
                            </div>
                        </el-header>

                        <!-- 主区域 -->
                        <el-main style="height: 80%; margin-top: 10px">
                            <!-- 时钟展示 -->
                            <iframe src="/static/toStaticPage?fileName=clock.html"
                                    class="fullWH"
                                    style="border-style: hidden;">
                            </iframe>
                        </el-main>
                    </el-container>

                    <!-- 网站信息 -->
                    <el-row style="width: 100%; height: 3%; font-size: 12px;">
                        <el-col :span="8" :offset="8" style="height: 100%;">
                            <div style="text-align: center">冀ICP备2022009090号</div>
                        </el-col>
                        <el-col :span="4" style="height: 100%;">
                            <div style="text-align: right">在线人数：{{onlineNum}}</div>
                        </el-col>
                        <el-col :span="4" style="height: 100%;">
                            <div style="text-align: right">版本号：<%=systemVersion%></div>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </transition>
        <!-- 编辑课时表侧边栏 -->
        <el-drawer
                title="编辑课时表"
                :with-header="false"
                :visible="classTimeDrawerShow"
                direction="ltr"
                :before-close="classTimeDrawerCloseCall"
                :destroy-on-close="true">
            <el-scrollbar>
                <div style="margin: 5% 5% 5% 5%">
                    <!-- 标题栏 -->
                    <div style="width: 100%; height: 5%; min-height: 30px;">
                        <div v-show="classTimeDrawerEditFlag" style="font-weight: bold; font-size: 20px; float: left">
                            编辑课时表
                        </div>
                        <div v-show="!classTimeDrawerEditFlag" style="font-weight: bold; font-size: 20px; float: left">
                            新增课时表
                        </div>
                        <div style="float: right;">
                            <i class="el-icon-close availableMouse" @click="classTimeDrawerCloseCall"></i>
                        </div>
                    </div>

                    <el-divider></el-divider>

                    <!-- 表单 -->
                    <div class="fullWH">
                        <el-form ref="classTimeForm"
                                 :model="classTimeObject"
                                 :rules="ClassTimeFormRules"
                                 :hide-required-asterisk="true"
                                 size="small"
                                 label-width="35%">
                            <el-form-item label="课时表名称" prop="designation">
                                <el-input v-model="classTimeObject.designation"
                                          placeholder="在此输入名称~"
                                          maxlength="15"
                                          show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="权限" prop="auth">
                                <el-select v-model="classTimeObject.auth" placeholder="请选择权限">
                                    <el-option
                                            v-for="(value, key) in classTimeAuth"
                                            :key="parseInt(key)"
                                            :label="value"
                                            :value="parseInt(key)">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开始时间" prop="startTime">
                                <el-time-picker
                                        v-model="classTimeObject.startTime"
                                        format="HH:mm"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="请选择第一节课开始时间">
                                </el-time-picker>
                            </el-form-item>
                            <el-form-item label="课时数" prop="forenoonNum">
                                <el-input-number v-model="classTimeObject.forenoonNum" :min="1" :max="20" controls-position="right">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="学习时长（min）">
                                <el-input-number v-model="classTimeObject.learnMinutes" :min="1" :max="240" controls-position="right">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="休息时长（min）">
                                <el-input-number v-model="classTimeObject.restMinutes"
                                                 :min="1" :max="240"
                                                 controls-position="right"
                                                 @change="restParamChange">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="上课铃声" prop="goBellId">
                                <el-select v-model="classTimeObject.goBellId" placeholder="请选择铃声">
                                    <el-option v-for="(bell) in bellList"
                                               :key="bell.id"
                                               :label="bell.bellTitle"
                                               :value="bell.id"
                                               :id="getOptionId(bell.id, 'goBell')"
                                               @mouseover.native="setMouseOver($event, 'goBell')"
                                               @mouseout.native="setMouseOut()">
                                        <span style="float: left">{{bell.bellTitle}}</span>
                                        <el-image style="width: 10px; height: 10px; display: none" src="/resources/images/static/playAnimation.gif">
                                        </el-image>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="下课铃声" prop="afterBellId">
                                <el-select v-model="classTimeObject.afterBellId" placeholder="请选择铃声">
                                    <el-option v-for="(bell) in bellList"
                                               :key="bell.id"
                                               :label="bell.bellTitle"
                                               :value="bell.id"
                                               :id="getOptionId(bell.id, 'afterBell')"
                                               @mouseover.native="setMouseOver($event, 'afterBell')"
                                               @mouseout.native="setMouseOut()">
                                        <span style="float: left">{{bell.bellTitle}}</span>
                                        <el-image style="width: 10px; height: 10px; display: none" src="/resources/images/static/playAnimation.gif">
                                        </el-image>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="午休">
                                <el-radio-group v-model="classTimeObject.noonBreakFlag"
                                                @change="forceUpdate">
                                    <el-radio :label="1" border>开启</el-radio>
                                    <el-radio :label="2" border>关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="午休时长（min）" v-if="classTimeObject.noonBreakFlag == 1">
                                <el-input-number v-model="classTimeObject.noonBreakMinutes" :min="classTimeObject.restMinutes" :max="120" controls-position="right">
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="午后课时数" v-if="classTimeObject.noonBreakFlag == 1">
                                <el-input-number v-model="classTimeObject.afternoonNum" :min="1" :max="20" controls-position="right">
                                </el-input-number>
                            </el-form-item>

                            <el-form-item label="是否开启大课间">
                                <el-radio-group v-model="classTimeObject.bigBreak">
                                    <el-radio :label="1" border>开启</el-radio>
                                    <el-radio :label="2" border>关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="是否开启预备铃">
                                <el-radio-group v-model="classTimeObject.readyBell" @change="classTimeObject.readyBellId = ''">
                                    <el-radio :label="1" border>开启</el-radio>
                                    <el-radio :label="2" border>关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="预备铃声" v-show="classTimeObject.readyBell == 1" prop="readyBellId" >
                                <el-select v-model="classTimeObject.readyBellId" placeholder="请选择铃声" @change="forceUpdate">
                                    <el-option v-for="(bell) in bellList"
                                               :key="bell.id"
                                               :label="bell.bellTitle"
                                               :value="bell.id"
                                               :id="getOptionId(bell.id, 'afterBell')"
                                               @mouseover.native="setMouseOver($event, 'afterBell')"
                                               @mouseout.native="setMouseOut()">
                                        <span style="float: left">{{bell.bellTitle}}</span>
                                        <el-image style="width: 10px; height: 10px; display: none" src="/resources/images/static/playAnimation.gif">
                                        </el-image>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-show='!classTimeDrawerEditFlag' type="primary" @click="addClassTime('classTimeForm')">立即创建</el-button>
                                <el-button v-show='classTimeDrawerEditFlag' type="primary" @click="editClassTime('classTimeForm')">立即提交</el-button>
                                <el-button @click="classTimeDrawerCloseCall">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-scrollbar>
        </el-drawer>

        <!-- 音频标签 -->
        <audio id="audio" src=""></audio>
    </div>
</body>

<script>
    /** 后台返回数据 */
    let result = ${result};
    /** 自动播放音乐延时器 */
    let autoPlayTimout;
    /** 音频标签对象 */
    let audioLabel = document.getElementById("audio");
    /** 枚举值 */
    let enumMap = <%=enumMap%>;

    $(function () {
        //开启心跳
        initWebSocket('ws://localhost:8080/websocket/testsocket',
            function (returnData) {
                //刷新在线人数
                learnBell.onlineNum = returnData;
                //若课时表启用，则判断是否打铃
                if (learnBell.classTimeSwitch) {
                    learnBell.bellDetection();
                    learnBell.stepDetection()
                }
            }
        );

        //判断数据是否为空
        if (result.flag) {
            //课时表列表
            learnBell.classTimeList = result.data;
            //课时表权限
            learnBell.classTimeAuth = enumMap.CLASSTIMEAUTH;
        } else {
            learnBell.$confirm(result.errorMsg + ', 是否返回首页?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //返回首页
                parent.location.href = "/toHomePage";
            });
        };

        //显示界面
        window.setTimeout("learnBell.screenShow = true;", 400);
    });

    //校验预备铃声选项
    let judgeReadyBell = function (rule, value, callback) {
        let readyBellId = learnBell.classTimeObject.readyBellId;
        //只有开启预备铃，才校验
        if (learnBell.classTimeObject.readyBell == 1) {
            if (typeof(readyBellId) == "undefined" || readyBellId == '') {
                callback(new Error('请选择预备铃'));
                return false;
            }
        }
        callback();
    };

    //校验课时表名称是否重复
    let judgeDesignation = function (rule, value, callback) {
        //编辑状态，课时表名称与之前不同时，才判断
        if (learnBell.classTimeDrawerEditFlag && value == learnBell.classTimeNowObject.designation) {
            callback();
        }
        ajaxGetPackage("/learnBell/designationSame/" + value,
            function () {
                callback(new Error('课时表名称重复'))
            },
            function (returnData) {
                //若是因为异常导致false，则输出异常原因
                if (returnData.errorMsg != "") {
                    callback(new Error(returnData.errorMsg));
                } else {
                    callback();
                };
            },
            function (returnData) {
                callback(new Error('未知异常，请联系管理员！'));
            });
    }

    //播放音乐
    function playMusic (bellId) {
        audioLabel.setAttribute("src", "/bell/getBell/" + bellId);
        audioLabel.play();
    };

    //下拉框鼠标悬停后播放音乐
    function selectOption (bellId, prefix) {
        //选项的图片元素
        let imageObject = $("#" + prefix + bellId + "> .el-image");
        //显示图片
        imageObject.css("display", "inline-block");
        //播放音乐，
        playMusic(bellId);
    }

    let learnBell = new Vue({
        el: "#learnBell-Element",
        data: {
            //界面显示
            screenShow: false,
            //课时表状态
            classTimeState: "课时表未启用",
            //课时表信息加载标志
            classTimeListLoading: false,
            //课时表启用标志
            classTimeSwitch: false,
            //课时表编辑开关禁用标志
            classTimeEditDisabled: true,
            //课时表编辑抽屉界面显示标志
            classTimeDrawerShow: false,
            //课时表编辑抽屉功能： 编辑true、新增false
            classTimeDrawerEditFlag: true,
            //编辑课时表对象
            classTimeObject: {},
            //当前启用的课时表对象
            classTimeNowObject: {
                designation: "请选择课时表"
            },
            //课时表列表
            classTimeList: [],
            //铃声列表
            bellList: [],
            //课时表计划
            classTimePlan: [],
            //预备铃时间列表
            readyBellList: [],
            //上课铃时间列表
            goClassBellList: [],
            //下课铃时间列表
            afterClassBellList: [],
            //步骤数组，记录每个步骤的开始时间，以便进行下一步
            stepArray: [],
            //课时表权限枚举
            classTimeAuth: [],
            //课时节点
            active: 0,
            //表单校验规则
            ClassTimeFormRules: {
                designation: [
                    {required: true, message: '请输入课时表名称', trigger: 'blur'},
                    {max: 15, message: '长度最大15个字符', trigger: 'blur'},
                    {validator: judgeDesignation, trigger: 'blur'}
                ],
                auth: [
                    {required: true, message: '请选择课时表权限', trigger: 'blur'}
                ],
                startTime: [
                    {required: true, message: '请选择第一节课开始时间', trigger: 'blur'}
                ],
                goBellId: [
                    {required: true, message: '请选择上课铃声', trigger: 'blur'}
                ],
                afterBellId: [
                    {required: true, message: '请选择下课铃声', trigger: 'blur'}
                ],
                readyBellId: [
                    {validator: judgeReadyBell, trigger: 'blur'}
                ]
            },
            //在线人数
            onlineNum: 0
        },
        methods: {
            //选择课时表
            classTimeSelect(command) {
                //获取课时表数据
                learnBell.classTimeNowObject = learnBell.classTimeList[command];
                //获取课时表计划
                learnBell.getClassTimePlan(learnBell.classTimeNowObject.id);
                //转换特殊字段：午休（午休时长 > 休息时长，代表午休）、开始时间
                if (learnBell.classTimeNowObject.noonBreakMinutes > learnBell.classTimeNowObject.restMinutes) {
                    learnBell.classTimeNowObject.noonBreakFlag = 1;
                } else {
                    learnBell.classTimeNowObject.noonBreakFlag = 2;
                }
                // learnBell.classTimeNowObject.startTime = new Date(learnBell.classTimeNowObject.startTime).dateFormatString("HH:mm")
            },

            //获取课时表计划
            async getClassTimePlan (classTimeId) {
                //课时表计划开始加载
                learnBell.classTimeListLoading = true;

                let flag = await ajaxGetPackage("/learnBell/getClassTimePlan?classTimeId=" + classTimeId,
                            function successCallback (returnData) {
                                returnData = returnData.data;
                                //预备铃
                                learnBell.readyBellList = returnData[0];
                                //上课铃
                                learnBell.goClassBellList = returnData[1];
                                //下课铃
                                learnBell.afterClassBellList = returnData[2];
                                //课时表计划，优化加载展示
                                window.setTimeout(function() {
                                    //赋值课时表计划
                                    learnBell.classTimePlan = returnData[3];
                                    //重置步骤
                                    learnBell.stepArray = [];
                                    //转换课时表计划中的类型
                                    learnBell.classTimePlan.forEach(function (subPlan) {
                                        //增加步骤
                                        learnBell.stepArray.push(new Date(subPlan.timeStart).dateFormatString("HHmm"));
                                        switch(subPlan.type){
                                            case "ready" :
                                                subPlan.type = "el-icon-bell";
                                                break;
                                            case "classes" :
                                                subPlan.type = "el-icon-collection";
                                                break;
                                            case "rest" :
                                                subPlan.type = "el-icon-hot-water";
                                                break;
                                            default:
                                                subPlan.type = "el-icon-hot-water";
                                                break;
                                        }
                                    });
                                    //增加最后一步的结束时间
                                    learnBell.stepArray.push(new Date(learnBell.classTimePlan[learnBell.classTimePlan.length - 1].timeEnd).dateFormatString("HHmm"));
                                }, 1000);
                            },
                            function failCallback (returnData) {
                                learnBell.$message.error(returnData.errorMsg);
                            },
                            function errorCallback (error) {
                                learnBell.$message.error("未知异常，请联系管理员！");
                            }
                        );
                //课时表计划停止加载，并启用开关，最少加载一秒
                window.setTimeout(function() {
                    //停止加载
                    learnBell.classTimeListLoading = false;
                    if (flag) {
                        //空状态切换
                        $("#classTimeEmpty").css("display", "none");
                        $("#classTimeSteps").css("display", "block");
                        //关闭课时表
                        learnBell.classTimeSwitch = false;
                        //重置当前时间
                        learnBell.classTimeState = "课时表未启用";
                        //重置步骤
                        learnBell.active = 0;
                        //编辑开关，只能编辑自己的课时表
                        learnBell.classTimeEditDisabled = learnBell.judgeAuth() ? false : true;
                    };
                }, 1000);
            },

            //课时表计划初始化
            classTimePlanInit () {
                //当前课时表对象初始化
                learnBell.classTimeNowObject = {designation: "请选择课时表"};
                //课时表计划开始加载
                learnBell.classTimeListLoading = true;
                //课时表计划停止加载，并禁用课时表操作菜单
                window.setTimeout(function() {
                    //停止加载
                    learnBell.classTimeListLoading = false;
                    //空状态切换
                    $("#classTimeEmpty").css("display", "flex");
                    $("#classTimeSteps").css("display", "none");
                    //启用开关
                    learnBell.classTimeSwitchDisabled = true;
                    //编辑开关，只能编辑自己的课时表
                    learnBell.classTimeEditDisabled = true;
                }, 500);
            },

            //操作课时表
            classTimeOperation (command) {
                switch (command) {
                    //新增课时表
                    case 1: {
                        //更改编辑抽屉功能
                        learnBell.classTimeDrawerEditFlag = false;
                        //打开编辑课时表抽屉
                        learnBell.classTimeAddDrawerSwitch(true);
                        break;
                    }
                    //启用课时表
                    case 2: {
                        learnBell.classTimeSwitchMethod();
                        break;
                    }
                    //编辑课时表
                    case 3: {
                        //更改编辑抽屉功能
                        learnBell.classTimeDrawerEditFlag = true;
                        //打开编辑课时表抽屉
                        learnBell.classTimeAddDrawerSwitch(true);
                        //初始化表单内容
                        learnBell.classTimeObject = clone(learnBell.classTimeNowObject);
                        break;
                    }
                    //删除课时表
                    case 4: {
                        learnBell.$confirm('确定删除【' + learnBell.classTimeNowObject.designation + '】课时表吗？', '警告', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            //删除课时表
                            learnBell.deleteClassTime(learnBell.classTimeNowObject.id);
                        }).catch(()=>{});
                        break;
                    }
                }
            },

            //启用/关闭课时表
            classTimeSwitchMethod() {
                if (learnBell.classTimeSwitch) {
                    //开启提示
                    learnBell.$notify.success({
                        title: '启用课时表成功',
                        message: '开始奋斗吧，加油！！！',
                    });
                    //执行一次步骤更新
                    learnBell.stepDetection();
                } else {
                    //关闭提示
                    learnBell.$notify.info({
                        title: '关闭课时表成功',
                        message: '自律是成功的捷径！！！',
                    });
                    //重置当前时间
                    learnBell.classTimeState = "课时表未启用";
                    //重置步骤
                    learnBell.active = 0;
                }
            },

            //检测是否该响铃
            bellDetection () {
                /** 当前时间 */
                let nowDate = new Date();
                let now = nowDate.dateFormatString("HHmm");
                //显示当前时间
                learnBell.classTimeState = nowDate.dateFormatString('yyyy-MM-dd HH:mm:ss');

                //打铃
                //1、预备铃
                if (learnBell.readyBellList.remove(now)) {
                    playMusic(learnBell.classTimeNowObject.readyBellId);
                    //2、上课铃
                } else if (learnBell.goClassBellList.remove(now)) {
                    playMusic(learnBell.classTimeNowObject.goBellId);
                    //3、下课铃
                } else if (learnBell.afterClassBellList.remove(now)) {
                    playMusic(learnBell.classTimeNowObject.afterBellId);
                }
            },

            //检测是否该进行下一步骤
            stepDetection () {
                /** 当前时间 */
                let nowDate = new Date();
                let now = nowDate.dateFormatString("HHmm");
                //排序数组
                let sortArray = learnBell.stepArray.sortNoAffect();
                //查找小于等于当前时间的最大的数
                for(let index = 0, length = sortArray.length; index < length; index++){
                    if (sortArray[index] > now) {
                        //这个数的前一个数在原数组的位置就是当前步骤
                        learnBell.active = learnBell.stepArray.indexOf(sortArray[index == 0 ? 0 : --index]);
                        return;
                    }
                }
            },

            //课时表新增抽屉关闭回调
            classTimeDrawerCloseCall () {
                learnBell.$confirm('是否关闭，将丢失已填写信息！', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    learnBell.classTimeAddDrawerSwitch(false);
                }).catch(()=>{});
            },

            //新增课时表抽屉开关
            classTimeAddDrawerSwitch (flag) {
                //开启抽屉需要重置表单数据
                if (flag) {
                    learnBell.classTimeObject = {
                        designation: '',
                        auth: '',
                        goBellId: '',
                        afterBellId: '',
                        readyBellId: '',
                        startTime: '',
                        forenoonNum: 1,
                        afternoonNum: 0,
                        noonBreakMinutes: 0,
                        learnMinutes: 1,
                        restMinutes: 1,
                        bigBreak: 2,
                        readyBell: 2,
                        noonBreakFlag: 2
                    }
                }

                //初始化音频列表
                if (learnBell.bellList.length < 1) {
                    //加载音频
                    learnBell.getBellList();
                }
                //开关抽屉
                learnBell.classTimeDrawerShow = flag;
            },

            //新增课时表
            addClassTime (formName) {
                learnBell.$refs[formName].validate((valid) => {
                    if (valid) {
                        //午休时长和午后课时数：若午休未开启，则赋值0
                        if (learnBell.classTimeObject.noonBreakFlag == 2) {
                            learnBell.classTimeObject.noonBreakMinutes = 0;
                            learnBell.classTimeObject.afternoonNum = 0;
                        };
                        ajaxPostPackage("/learnBell/editClassTime?operation=false", learnBell.classTimeObject,
                            function successCallback (returnData) {
                                learnBell.$message.success("新增课时表成功！");
                                //将 新增的课时表 添加到 课时表列表 中，并获取课时表计划
                                learnBell.classTimeList.push(returnData.data);
                                learnBell.classTimeSelect(learnBell.classTimeList.length - 1);
                                //关闭新增弹窗
                                learnBell.classTimeAddDrawerSwitch(false);
                            },
                            function failCallback (returnData) {
                                learnBell.$message.error(returnData.errorMsg);
                            },
                            function errorCallback (error) {
                                learnBell.$message.error("未知异常，请联系管理员！");
                            });
                    } else {
                        return false;
                    }
                });
            },

            //编辑课时表
            editClassTime (formName) {
                learnBell.$refs[formName].validate((valid) => {
                    if (valid) {
                        //午休时长和午后课时数：若午休未开启，则赋值0
                        if (learnBell.classTimeObject.noonBreakFlag == 2) {
                            learnBell.classTimeObject.noonBreakMinutes = 0;
                            learnBell.classTimeObject.afternoonNum = 0;
                        };

                        ajaxPostPackage("/learnBell/editClassTime?operation=true", learnBell.classTimeObject,
                            function successCallback (returnData) {
                                learnBell.$message.success("课时表编辑成功！");
                                //从 课时表列表 中移除编辑前的数据，插入编辑后的数据，并获取课时表计划
                                learnBell.classTimeList.remove(learnBell.classTimeNowObject);
                                learnBell.classTimeList.push(returnData.data);
                                learnBell.classTimeSelect(learnBell.classTimeList.length - 1);
                                //关闭编辑弹窗
                                learnBell.classTimeAddDrawerSwitch(false);
                            },
                            function failCallback (returnData) {
                                learnBell.$message.error(returnData.errorMsg);
                            },
                            function errorCallback (error) {
                                learnBell.$message.error("未知异常，请联系管理员！");
                            });
                    } else {
                        return false;
                    }
                });
            },

            //删除课时表
            async deleteClassTime (classTimeId) {
                let flag = await ajaxGetPackage("/learnBell/deleteClassTime/" + classTimeId,
                    function (returnData) {
                        //删除 课时表列表 中的数据
                        learnBell.classTimeList.remove(learnBell.classTimeNowObject);
                        //初始化课时表计划
                        learnBell.classTimePlanInit();
                        learnBell.$message.success("删除成功！");
                    },
                    function (returnData) {
                        learnBell.$message.error(returnData.errorMsg);
                    },
                    function (error){
                        learnBell.$message.error("未知异常，请联系管理员");
                    });
            },

            //获取音频列表
            getBellList () {
                ajaxGetPackage("/bell/getBell",
                function successCallback (returnData) {
                    //赋值音频列表
                    learnBell.bellList = returnData.data;
                },
                function failCallback (returnData) {
                    learnBell.$message.error(returnData.message);
                },
                function errorCallback (error) {
                   learnBell.$message.error("未知异常，请联系管理员！");
                });
            },

            //休息时长字段变更：保证午休时长 >= 休息时长
            restParamChange (value) {
                if (learnBell.classTimeObject.noonBreakFlag == 1 && learnBell.classTimeObject.noonBreakMinutes < value) {
                    learnBell.classTimeObject.noonBreakMinutes = value;
                }
            },

            //强制更新，防止变量值更新后，不选中对应选项
            forceUpdate (value) {
                this.$forceUpdate();
            },

            //判断是否有权限对课时表进行编辑
            judgeAuth () {
                let userId = ${userId};
                let classTimeUserId = learnBell.classTimeNowObject.userId;
                if (userId != classTimeUserId) {
                    return false;
                }
                return true;
            },

            //音频下拉框鼠标移入
            setMouseOver($event, prefix) {
                const selectedOption = $event.currentTarget.innerText
                let bellId;
                for (let index = 0; index < learnBell.bellList.length; index++) {
                    let param = learnBell.bellList[index];
                    if (param.bellTitle == selectedOption) {
                        bellId = param.id;
                    }
                };
                //延时执行播放音乐
                autoPlayTimout = window.setTimeout("selectOption(" + bellId + ",'" + prefix + "')", 1000);
            },

            //音频下拉框鼠标移出
            setMouseOut() {
                //删除动画
                $(".el-image").css("display", "none");
                //暂停
                audioLabel.pause();
                //删除延时器
                window.clearTimeout(autoPlayTimout);
            },

            //获取选项ID
            getOptionId(optionIndex, prefix) {
                return prefix + optionIndex;
            },

            //个人中心菜单
            handleCommand(command) {
                switch (command) {
                    case 'logout' : {
                        window.setTimeout("window.location = '/logout';", 300);
                        //隐藏整页
                        learnBell.screenShow = false;
                        break;
                    }
                    default : this.$message('click on item ' + command); break;
                }
            }
        }
    });
</script>
</html>
